import React from 'react';
import styles from './CourseIndex.css';

import headerBacMyCour from '../../assets/headerBacMyCour.png'
import Reflv from '../User/Reflv/index'

import { Input,Icon,Spin,Carousel,Menu} from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const Search = Input.Search;
import logoImg from '../../assets/logo.png'
import catIcon from '../../assets/catIcon.jpg'
import searchIcon from '../../assets/searchIcon.png'
import arrowRight from '../../assets/arrowRight.png'
import pageRight from '../../assets/pageRight.png'
const  imgVideoPicUrl = "https://image.huanqiushuju.com/"
import {getcookie} from '../../utils/cookies'
import {HOMEPAGE_URL} from '../../utils/constants'
import {cetGroupId} from '../../utils/constants'
import {testGroupId} from '../../utils/constants'
import {itGroupId} from '../../utils/constants'
import 'antd/dist/antd.css'



class CourseIndex extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      videoType:"flv",
      searchText: '', getCourseIndexState: null,
      groupList:[
        {
          groupName:"", groupId: 1,
          courseList:[
            {
              orgId:"云逸", courseImgName: "", weight:-1, courseId: -1,
              coursePri:1, courseName: "", courseGroup:"", isFree: true, commonCash: -1,
              commonYcoin: 1, discountCash: 0, discountYcoin: 0, enrollmentBeginTime: -1,
              enrollmentEndTime: -1, courseBeginTime:-1,
              courseEndTime:-1, salesNum:-1,
            }]
        },
        {
          groupName:"", groupId: 1,
          courseList:[
            {
              orgId:"云逸", courseImgName: "", weight:-1, courseId: -1,
              coursePri:1, courseName: "", courseGroup:"", isFree: true, commonCash: -1,
              commonYcoin: 1, discountCash: 0, discountYcoin: 0, enrollmentBeginTime: -1,
              enrollmentEndTime: -1, courseBeginTime:-1,
              courseEndTime:-1, salesNum:-1,
            }]
        },
        {
          groupName:"", groupId: 1,
          courseList:[
            {
              orgId:"云逸", courseImgName: "", weight:-1, courseId: -1,
              coursePri:1, courseName: "", courseGroup:"", isFree: true, commonCash: -1,
              commonYcoin: 1, discountCash: 0, discountYcoin: 0, enrollmentBeginTime: -1,
              enrollmentEndTime: -1, courseBeginTime:-1,
              courseEndTime:-1, salesNum:-1,
            }]
        },
        {
          groupName:"", groupId: 1,
          courseList:[
            {
              orgId:"云逸", courseImgName: "", weight:-1, courseId: -1,
              coursePri:1, courseName: "", courseGroup:"", isFree: true, commonCash: -1,
              commonYcoin: 1, discountCash: 0, discountYcoin: 0, enrollmentBeginTime: -1,
              enrollmentEndTime: -1, courseBeginTime:-1,
              courseEndTime:-1, salesNum:-1,
            }]
        },
      ],
      newGroupList:[
        {
          groupName:"", groupId: 1,newGroupName:"",
          courseList:[
            {
              orgId:"云逸", courseImgName: "", weight:-1, courseId: -1,
              coursePri:1, courseName: "", courseGroup:"", isFree: true, commonCash: -1,
              commonYcoin: 1, discountCash: 0, discountYcoin: 0, enrollmentBeginTime: -1,
              enrollmentEndTime: -1, courseBeginTime:-1,
              courseEndTime:-1, salesNum:-1,
            }],
          typeNameList:[{typeNameId:1,typeName:''}]
        },

        {
          groupName:"", groupId: 1,newGroupName:"",
          courseList:[
            {
              orgId:"云逸", courseImgName: "", weight:-1, courseId: -1,
              coursePri:1, courseName: "", courseGroup:"", isFree: true, commonCash: -1,
              commonYcoin: 1, discountCash: 0, discountYcoin: 0, enrollmentBeginTime: -1,
              enrollmentEndTime: -1, courseBeginTime:-1,
              courseEndTime:-1, salesNum:-1,
            }],
          typeNameList:[{typeNameId:1,typeName:''}]
        },
        {
          groupName:"", groupId: 1,newGroupName:"",
          courseList:[
            {
              orgId:"云逸", courseImgName: "", weight:-1, courseId: -1,
              coursePri:1, courseName: "", courseGroup:"", isFree: true, commonCash: -1,
              commonYcoin: 1, discountCash: 0, discountYcoin: 0, enrollmentBeginTime: -1,
              enrollmentEndTime: -1, courseBeginTime:-1,
              courseEndTime:-1, salesNum:-1,
            }],
          typeNameList:[{typeNameId:1,typeName:''}]
        },
      ]
    }
    // let state = this.state
    // return {
    //   state
    // }
  }



  componentWillMount(){
    let getCourseIndexState = true

    this.setState({getCourseIndexState:true})
    this.props.dispatch({type:"courseIndex/getCourseIndexInfo",payload:{getCourseIndexState}})
  }
  componentDidUpdate(){
    let props = this.props.courseIndex
    if (props.getCourseIndexState == true && this.state.getCourseIndexState == true) {
      // console.log("---------props.newGroupList",props.newGroupList)

      this.setState({getCourseIndexState:false,groupList:props.groupList,
        newGroupList:props.newGroupList})
      let getCourseIndexState = false
      this.props.dispatch({type:"courseIndex/resetState",payload:{getCourseIndexState}})
      // if (this.data.groupList != undefined) {
      //   console.log("____----------this.data.groupList",this.data.groupList)
      //
      // }



    }
  }


  render(){
    // console.log("--------------this.props---render",this.props)
    // console.log("--------------this.state.newGroupList",this.state.newGroupList)
    let props = this.props.courseIndex
    let newGroupList = this.state.newGroupList
    return (
      <div className={styles.allContent}>
       <div className={styles.whiteHeaderContent}>
        <div className={styles.contentFlex}>
          <div className={styles.topHeader}>

            <div className={styles.headerLeft}>
              <img className={styles.logoImg} src={logoImg} alt="logo"/>
              <h3 className={styles.courseHead}>环球云逸课堂</h3>
              <Input
                placeholder="输入搜索内容"
                className={styles.searchInput}
                style={{ width: 200 }}
                onChange={(e)=>{
                  this.setState({searchText:e.target.value})
                }}
                value={this.state.searchText}
                onPressEnter={this.onSearchInput}

              />
              <div className={styles.searchIconBac} onClick={this.onSearchInput}>
                <img className={styles.searchIcon} src={searchIcon} alt="搜索"/>
              </div>
            </div>

            <div className={styles.headerRight}>
              <div>我的课程</div>
              <div>通知</div>
              <img className={styles.avateIcon} src={logoImg} alt="logo"/>
            </div>

          </div>

        </div>
       </div>

        <div className={styles.swiperImgContent}>
          <div className={styles.menuContent}>
            {/*<Menu onClick={this.handleClick} id="menu" mode="vertical">*/}
              {/*<SubMenu key="sub1" title={<span>{newGroupList[0].newGroupName}</span>} className={styles.SubMenuContent}>*/}
                {/*{*/}
                  {/*newGroupList[0].typeNameList.map((item)=>{*/}
                    {/*return (*/}
                        {/*<Menu.Item className={styles.menuItem} key={item.typeNameId}>{item.typeName}</Menu.Item>*/}
                    {/*)*/}
                  {/*})*/}
                {/*}*/}
              {/*</SubMenu>*/}
              {/*<SubMenu key="sub2" title={<span>{newGroupList[1].newGroupName}</span>} className={styles.SubMenuContent}>*/}
                {/*{*/}
                  {/*newGroupList[1].typeNameList.map((item)=>{*/}
                    {/*return (*/}
                      {/*<Menu.Item className={styles.menuItem} key={item.typeNameId}>{item.typeName}</Menu.Item>*/}
                    {/*)*/}
                  {/*})*/}
                {/*}*/}
              {/*</SubMenu>*/}
              {/*<SubMenu key="sub4" title={<span>{newGroupList[2].newGroupName}</span>} className={styles.SubMenuContent}>*/}
                {/*{*/}
                  {/*newGroupList[2].typeNameList.map((item)=>{*/}
                    {/*return (*/}
                      {/*<Menu.Item className={styles.menuItem} key={item.typeNameId}>{item.typeName}</Menu.Item>*/}
                    {/*)*/}
                  {/*})*/}
                {/*}*/}
              {/*</SubMenu>*/}
            {/*</Menu>*/}
          </div>


          <Carousel autoplay>
            <div className={styles.swiperList}>
              <div className={styles.coverImgContent} >
                {/*<h>{props.swiperList[0]}</h>*/}
                {/*<img className={styles.coverImg1} src={props.swiperList[0].courseImgName} alt="封面图"/>*/}
                {/*<img className={styles.coverImg} src={props.swiperList[0].courseImgName} alt="封面图"/>*/}
              </div>

            </div>

          </Carousel>
        </div>

        <div className={styles.centerContent}>

           <div className={styles.centerConetentF}>

             {/*<div className={styles.groupTitle}>*/}
               {/*<h1>{this.state.groupList[0].groupName}</h1>*/}
               {/*<div >*/}
                 {/*<text>更多</text>*/}
                 {/*<img className={styles.pageRightIcon} src={pageRight} alt="更多"/>*/}

               {/*</div>*/}
             {/*</div>*/}
             <div className={styles.groupTitle}>
               <p>
                 <h1>{this.state.groupList[0].groupName}</h1>
                 <span></span>
               </p>
               <div >
                 <text>更多</text>
                 <img className={styles.pageRightIcon} src={pageRight} alt="更多"/>

               </div>
             </div>



            <div className={styles.groupContent}>
            {
              this.state.groupList[0].courseList.map((item)=>{

                return (
                  <div className={styles.groupMap}>
                    <div className={styles.groupMapFlex}>
                      {/*<div className={styles.courseShow}  key={item.courseId}>*/}
                        {/*<div className={styles.courseFlex_content}>*/}

                        <img className={styles.courseImg} src={item.courseImgName} alt="课程图"/>

                        <div className={styles.coursetext}>{item.courseName}</div>
                        <div className={styles.courseText}>
                          <img className={styles.avateIcon} src={logoImg} alt="logo"/>
                          <div className={styles.keyTeacher}>{item.keyTeacher}</div>
                        </div>
                        <div className={styles.cashNumContent}>
                          <text className={styles.cashNum}>￥{item.discountPrice}/{item.discountYcoin}贝</text>
                          <text className={styles.learnNum}>{item.salesNum} <text className={styles.learnNumText}>人在学</text> </text>
                        </div>
                        {/*</div>*/}

                      {/*</div>*/}

                    </div>

                  </div>
                )

              })
            }
            </div>
          </div>

        </div>
        <div className={styles.centerContent}>
        <div className={styles.centerConetentF0}>
         <div className={styles.centerConetentF01}>


          <div className={styles.centerConetentF2}>
            <div className={styles.groupTitle}>
              <p>
                <h1>{this.state.groupList[2].groupName}</h1>
                <span></span>
              </p>
              <div >
                <text>更多</text>
                <img className={styles.pageRightIcon} src={pageRight} alt="更多"/>

              </div>
            </div>
            <div className={styles.groupContent}>
              {
                this.state.groupList[2].courseList.map((item)=>{

                  return (
                    <div className={styles.groupMap}>
                      <div className={styles.groupMapFlex}>
                        {/*<div className={styles.courseShow}  key={item.courseId}>*/}
                        {/*<div className={styles.courseFlex_content}>*/}

                        <img className={styles.courseImg} src={item.courseImgName} alt="课程图"/>

                        <div className={styles.coursetext}>{item.courseName}</div>
                        <div className={styles.courseText}>
                          <img className={styles.avateIcon} src={logoImg} alt="logo"/>
                          <div className={styles.keyTeacher}>{item.keyTeacher}</div>
                        </div>
                        <div className={styles.cashNumContent}>
                          <text className={styles.cashNum}>￥{item.discountPrice}/{item.discountYcoin}贝</text>
                          <text className={styles.learnNum}>{item.salesNum} <text className={styles.learnNumText}>人在学</text> </text>
                        </div>
                        {/*</div>*/}

                        {/*</div>*/}

                      </div>





                    </div>
                  )

                })
              }
            </div>
          </div>
         </div>
        </div>
        </div>
        <div className={styles.centerContent}>

          <div className={styles.centerConetentF}>
            <div className={styles.groupTitle}>
              <p>
                <h1>{this.state.groupList[3].groupName}</h1>
                <span></span>
              </p>
              <div >
                <text>更多</text>
                <img className={styles.pageRightIcon} src={pageRight} alt="更多"/>

              </div>
            </div>
            <div className={styles.groupContent}>
              {
                this.state.groupList[3].courseList.map((item)=>{

                  return (
                    <div className={styles.groupMap}>
                      <div className={styles.groupMapFlex}>
                        {/*<div className={styles.courseShow}  key={item.courseId}>*/}
                        {/*<div className={styles.courseFlex_content}>*/}

                        <img className={styles.courseImg} src={item.courseImgName} alt="课程图"/>

                        <div className={styles.coursetext}>{item.courseName}</div>
                        <div className={styles.courseText}>
                          <img className={styles.avateIcon} src={logoImg} alt="logo"/>
                          <div className={styles.keyTeacher}>{item.keyTeacher}</div>
                        </div>
                        <div className={styles.cashNumContent}>
                          <text className={styles.cashNum}>￥{item.discountPrice}/{item.discountYcoin}贝</text>
                          <text className={styles.learnNum}>{item.salesNum} <text className={styles.learnNumText}>人在学</text> </text>
                        </div>
                        {/*</div>*/}

                        {/*</div>*/}

                      </div>





                    </div>
                  )

                })
              }
            </div>
          </div>

        </div>
        <div>

        </div>
      </div>
    )
  }

}



export default CourseIndex;
